/**
 * Created by Administrator on 2016/12/2.
 */
$(function(){
//----------------轮播图模块-----------------
    var mySwiper = new Swiper('.swiper-container',{
        autoplay : 1200,
        autoplayDisableOnInteraction : false,
        loopAdditionalSlides : 50,
        // 左右按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 分页按钮
        pagination : '.swiper-pagination',
        paginationClickable :true
    });
});

// 请求图片
$.get("index/banner.json", function (res) {
    $.each(res,function(m,n){
    $("<img/>").attr("src",res[m].imgUrl).appendTo($(".swiper-slide").eq(m))
	})

});

// 请求城市列表数据
$.get("index/menu.json",function(res){
	// console.log(res);
	createCity(res);
});
// 请求机酒自由行数据
$.get("index/freeWalk.json",function(res){
	freeWalk(res);
});
// 请求主题推荐数据
$.get("index/freeWalk.json",function(res){
	theme(res);
})


//---------------------城市列表 多级菜单模块------------------
function createCity(data){
	var imgArry = ["../img/worldsmolllogo-_1.png","../img/worldsmolllogo-_2.png","../img/worldsmolllogo-_3.png","../img/worldsmolllogo-_4.png","../img/worldsmolllogo-_5.png","../img/worldsmolllogo-_6.png","../img/worldsmolllogo-_7.png"];
	var i = 0;

	// 遍历数据  动态创建城市列表
	$.each(data,function(m,n){
		var createLi = $("<li class='category-li'/>");
		createLi.append($("<img class='category-liimg'/>").attr("src",imgArry[i]))
				.append($("<h3 class='category-lih3'/>").html(n.title))
				.append($("<p class='category-p2'/>")
					.append($("<a href='' class='category-a'>").html(n.mainCity[0]))
					.append($("<a href='' class='category-a'>").html(n.mainCity[1]))
					.append($("<a href='' class='category-a'>").html(n.mainCity[2]))
					.append($("<a href='' class='category-a'>").html(n.mainCity[3]))
					.append($("<a href='' class='category-a'>").html(n.mainCity[4])))
				.append($("<p class='category-p0'/>")
					.append($('<img src="/img/bg_06.png" width = 10 height = 12 alt="">')));
					
		createLi.appendTo($(".category-ul"));
		i++;
		$(".category-lih3").css("color","#fff");
	});
	// 鼠标划入划出效果
	var cityli = $(".category-li");
	// console.log(cityli);
	$.each(cityli,function(){
		$(this).on("mouseenter",function(){
			$(".category-div").css("display","block");
			cityli.css("background","");
			var i = $(this).index();
			Citylist(data,i);
			$(this).css("background","#fff");
			$(this).find(".category-lih3").css("color","#000");
		});
	
	}).on("mouseleave",function(){
		cityli.css("background","fff");
		$(this).find(".category-lih3").css("color","#fff")
		$(this).parent().mouseleave(function(){
			$(".category-div").css("display","none");
			cityli.css("background","");
		})
	})
	
}
function Citylist(data,i){
	$(".category-div").empty();
	// 动态创建城市列表菜单
	var oDiv = $('.category-div');
	if (i!=6) {
		var ul = $('<ul class="ul"/>').css("width","700px").appendTo(oDiv);
            var li = $('<li class="column"/>').appendTo(ul);
            var citys = data[i-1]["moreCity"];
            for(var k=0;k<citys.length-1;k++){
                $('<h2 class="bigtitle"/>').html(data[i-1]["moreCity"][k]["cityName"]).appendTo(li);
                var p = $('<p class="sub"/>').appendTo(li);
                var items = data[i-1]["moreCity"][k]["items"];
                for(var j=0;j<items.length;j++){
                    var a = $('<a href="" class="list">').html(items[j]).appendTo(p);
                }
            }
            var li2 = $('<li class="column"/>').appendTo(ul);
            $('<h2 class="bigtitle"/>').html(data[i-1]["moreCity"][citys.length-1]["cityName"]).appendTo(li2);
            var p2 = $('<p class="sub"/>').appendTo(li2);
            var items2 = data[i-1]["moreCity"][citys.length-1]["items"];
            for(var j=0;j<items2.length;j++){
                var a = $('<a href="" class="list">').html(items2[j]).appendTo(p2);
            }
            $('<img class="categoryImg"/>').attr("src",data[i-1]["moreCityImg"]).appendTo(li2);
        }else{
            var ul = $('<ul class="ul"/>').css("width","370px").appendTo(oDiv);
            var li = $('<li class="column"/>').css("width","330px").appendTo(ul);
            $('<h2 class="bigtitle"/>').html(data[i-1]["moreCity"][0]["cityName"]).appendTo(li);
            //console.log(data[i]["moreCity"][0]["cityName"]);
            $(data[i-1]["moreCity"][0]["items"]).each(function(m,n){
                $('<img class="oImg"/>').attr("src",n).appendTo(li);
            })
        }
	
}


// ------------------机酒自由行------------------

function freeWalk(data){
	// 导航 标题栏获取
	$.each(data,function(m,n){
		$('<li/>').addClass("home-tagli").append($('<a href=""/>').css("font-size","15px").html(n.title)).appendTo($('.home-tags'));
	});
	// 第一个标题样式设置
	$('.home-tagli').eq(0).find("a").css({"color":"#0eb6a3","display":"inline-block","padding-bottom":"9px","border-bottom":"3px solid #0eb6a3"})
	myfreewalk(data,0);
	$(".home-tagli").on("mouseover",function(){
		var i = $(this).index();
		// console.log($(this).find('a'));
		$(this).find('a').addClass("home-tagsa");
		myfreewalk(data,i);
	});
	$(".home-tagli").on("mouseout",function(){
		$(this).find('a').removeClass();
	});
}
function myfreewalk(data,i){
	// console.log(data);
	// 第一个li
	var oUl = $('.freewalk-list');
	oUl.empty();
	var data = data[i]['data'];
	$('<li class="home-freewalk-item"/>').append(
		$('<a href=""/>').append($('<img>').attr("src",data[0]['imgUrl'])
		).append($('<div class="infos"/>').append($('<p class="type"/>').html("机票"))
			.append($('<p class="price"/>').append($('<span/>').html(data[0]['price'])).append($('<span/>').css('font-size','12px').html("元起"))))
			.append($('<div class="title1"/>').append($('<h3 class="title"/>').css("color","#fff").html(data[0]['title']))
				.append($('<p class="time"/>').html(data[0]['time'])))
		).appendTo(oUl);
	// 剩下的li
	for (var k = 1; k < data.length; k++) {
		$('<li class="home-freewalk-item">').append(
			$('<a href=""/>').append($('<img/>').attr("src",data[k]['imgUrl']).css({"height":"181px","width":"275px"}))
				.append($('<div class="infos"/>').append($('<p class="type">').html("机票"))
					.append($('<p class="price">').append($('<span/>').html(data[k]['price'])).append($('<span/>').css('font-size','12px').html("元起"))))
					.append($('<div class="title2"/>').append($('<h3 class="title">').html(data[k]['title'])).append($('<p class="time"/>').html(data[k]["time"])))
		).appendTo(oUl);
	};
	// 创建最后一个li
	$('<li class="freewalk-more"/>').append($('<a href=""/>').append(
        $('<p class="more-p"/>').html('查看更多'+'<br/>'+'城市玩乐产品')).append(
        $('<img/>').attr("src","../img/jijiu2.jpg").addClass("more-img")).append(
        $('<span class="more-span"/>').append(
            $('<a href="" class="more-a">').html('机票 | ')).append(
            $('<a href="" class="more-a"/>').html('酒店 | ')).append(
            $('<a href="" class="more-a"/>').html('机+酒 | ')).append(
            $('<a href="" class="more-a"/>').css("background","none").html('邮轮'))))
		.appendTo(oUl)

}


// ---------------------主题推荐-------------------

function theme(data){
	// 导航 标题栏获取
	$.each(data,function(m,n){
		$('<li/>').addClass("theme-tagli").append($('<a href=""/>').css("font-size","15px").html(n.title)).appendTo($('.theme-tags'));
	});
	// 第一个标题样式设置
	$('.theme-tagli').eq(0).find("a").css({"color":"#0eb6a3","display":"inline-block","padding-bottom":"9px","border-bottom":"3px solid #0eb6a3"})
	mytheme(data,0);
	$(".theme-tagli").on("mouseover",function(){
		var i = $(this).index();
		// console.log($(this).find('a'));
		$(this).find('a').addClass("theme-tagsa");
		mytheme(data,i);
	});
	$(".theme-tagli").on("mouseout",function(){
		$(this).find('a').removeClass();
	});
}
function mytheme(data,i){
	// console.log(data);
	// 第一个li
	var oUl = $('.theme-list');
	oUl.empty();
	var data = data[i]['data'];
	$('<li/>').append(
		$('<a href=""/>').append($('<img>').attr("src",data[0]['imgUrl'])
		).append($('<div class="theme-infos"/>').append($('<p class="theme-type"/>').html("机票"))
			.append($('<p class="theme-price"/>').append($('<span/>').html(data[0]['price'])).append($('<span/>').css('font-size','12px').html("元起"))))
			.append($('<div class="theme-title1"/>').append($('<h3 class="theme-h3"/>').css("color","#fff").html(data[0]['title']))
				.append($('<p class="theme-time"/>').html(data[0]['time'])))
		).appendTo(oUl);
	// 剩下的li
	for (var k = 1; k < data.length; k++) {
		$('<li class="theme-item">').append(
			$('<a href=""/>').append($('<img/>').attr("src",data[k]['imgUrl']).css({"height":"181px","width":"275px"}))
				.append($('<div class="theme-infos"/>').append($('<p class="theme-type">').html("机票"))
					.append($('<p class="theme-price">').append($('<span/>').html(data[k]['price'])).append($('<span/>').css('font-size','12px').html("元起"))))
					.append($('<div class="theme-title2"/>').append($('<h3 class="theme-title">').html(data[k]['title'])).append($('<p class="theme-time"/>').html(data[k]["time"])))
		).appendTo(oUl);
	};
	// 创建最后一个li
	$('<li class="theme-li"/>').append($('<a href=""/>').append(
        $('<p class="theme-p"/>').html('查看更多'+'<br/>'+'主题推荐产品')).append(
        $('<img/>').attr("src","../img/theme.jpg").addClass("theme-img")).append(
        $('<span class="theme-span"/>').append(
            $('<a href="" class="theme-a">').html('亲子 | ')).append(
            $('<a href="" class="theme-a"/>').html('情侣 | ')).append(
            $('<a href="" class="theme-a"/>').html('海岛游 | ')).append(
            $('<a href="" class="theme-a"/>').html('购物'))))
		.appendTo(oUl)

}
$(".zw-footer").load("/foot")



